<template>
  <div class="flower">
    <!-- <Header></Header> -->
    <Carousel></Carousel>
    <div class="search">
      <el-input
        placeholder="你想要什么花呀？"
        prefix-icon="el-icon-search"
        v-model="name"
        size="small"
      >
      </el-input>
      <el-input
        placeholder="你想要送给谁呢？"
        prefix-icon="el-icon-search"
        v-model="objName"
        size="small"
      >
      </el-input>
      <el-button type="primary" size="small" @click="search">搜索</el-button>
      <el-button type="warning" size="small" @click="clear">重置</el-button>
    </div>

    <!-- 这是鲜花列表部分 -->
    <div class="flowerlist">
      <el-row>
        <div class="card">
          <el-col class="" v-for="(item, index) in flowerList" :key="index">
            <el-card :body-style="{ padding: '0px' }">
              <div class="imge">
                <img :src="require(`../../assets/${item.img}`)" class="image" />
              </div>
              <div style="padding: 14px">
                <span>{{ item.fname }}</span>
                <p style="color: #ff734c">￥{{ item.sprice}}</p>
                <div class="bottom">
<!--                  <el-button icon="el-icon-star-off" circle size="small" @click="sc"></el-button>-->
                  <el-button icon="el-icon-goods" circle size="small" @click="buy(item)"></el-button>
                <!-- <p>{{ item.fdesc  }}</p> -->
                </div>

                <p style="font-size: 10px; color:grey">
                  {{ item.fdesc }}
                </p>
              </div>
            </el-card>
          </el-col>
        </div>
      </el-row>
    </div>
    <!-- 分页 -->
    <div class="block">
     
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page=pageNum
       :page-sizes="[2, 5, 10, 20]"
       :page-size=pageSize
       layout="total, sizes, prev, pager, next, jumper"
       :total=total
     >
     </el-pagination>
     <!-- <Footer></Footer> -->
   </div>
   
  </div>

</template>

<script>
import Carousel from "../../components/Carousel.vue";
// import Header from "../front/header.vue"
// import Footer from '../../components/footer.vue'
export default {
  components: { Carousel },
  props: {},
  data() {
    return {
      name: "",
      objName: "",
      flowerList: [],
      userInfo:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):{},

      // 分页 
      // current-page 当前页数
      // currentPage:0,
      pageNum:1,
      pageSize:10,
      total:0
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 页面初始化
    load(){
      this.request.get("/flower/page",{
        params: {
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          fname: this.name,
          obj: this.objName
        }
      }).then((res) =>{
        console.log(res)
        console.log(res.data.data)
        this.flowerList = res.data.data.records;
        this.total = res.data.data.total
      })
    },
    // 搜索按钮
    search(){
      this.load();    
    },

    // 重置按钮
    clear(){
      this.name = "";
      this.objName = "";
      this.load();
    },
    // 每页显示个数改变时触发
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
       // 当前页码改变时触发
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
    // 点击收藏
    sc(){
      this.request.post("/sc",{
        name:this.name,
        descs:this.descs,
        price:this.price,
        uid:this.userInfo.id,
        url:this.url
      }).then(res=>{
        if(res.data.code === "200"){
          this.$message.success('您已经成功收藏啦！');
        }
      })
    },
    // 点击购买图标
    buy(item){
      // 存一下这个商品的数据
      // 把值带去flowerDetail页面
      // 第一种方法：$bus
       // 提供数据
      // this.$bus.$emit('h',item)

      // 第二种方法$router
      // this.$router.push({path:'/flowerDetail',query:item})

      // 第三种方法：vuex
      this.$store.commit('update',item)
      console.log(item)
      this.$router.push('/flowerDetail')

    }
  },
  created() {
    // 页面初始化
    this.load()
  },
  mounted() {
  },

};
</script>
<style lang="less" scoped>
.flower {
  // display: flex;
  // flex-direction: column;
  // justify-items: end;
  .search {
    float: right;
    // 搜索框
    .el-input {
      width: 30%;
      margin: 20px 15px;
    }
  }
  // 鲜花列表
  .flowerlist {
    // float: left;
    .el-row {
      width: 240px;
      // height: 200px;

      .card {
        // float: left;
        display: grid;
        margin: 90px 70px;
        /*  声明列的宽度  */
        grid-template-columns: repeat(5, 230px);
        /*  声明行间距和列间距  */
        grid-gap: 40px;
        /*  声明行的高度  */
        grid-template-rows: 330px;

        .imge {
          width: 200px;
          height: 200px;
          margin: 15px 16px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      .bottom {
        // height: 30px;
        float: right;
        
      }
      .desc {
        // display: inline-block;
        width: 200px;
        margin-top: 20px;
       p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
       }
      }
      }
    }
  }
  .block {
    float: right;
    padding-right:60px;
  }
}
</style>